<template>
  <div class="home">
    <div style="color: #606266; font-size: 15px">
      档案名称:<el-input
        v-model="searchForm.archMainTitle"
        clearable
        size="small"
        placeholder="请输入搜索的档案名称"
        style="width: 200px; margin: 0 10px"
      />
      归档状态:<el-select
        v-model="searchForm.archState"
        size="small"
        placeholder="请选择归档状态"
        style="margin: 0 10px"
      >
        <el-option
          v-for="item in stateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" size="small" @click="getData()">检索</el-button>
    </div>
    <el-table
      :data="listData"
      border
      max-height="650"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        align="center"
        prop="archMainCode"
        label="档案编号"
        width="width"
      />
      <el-table-column
        align="center"
        prop="archTitle"
        label="档案名称"
        width="width"
      />
      <!-- <el-table-column align="center" prop="prop1" label="归档类型" width="width">
      </el-table-column> -->
      <el-table-column align="center" label="归档状态">
        <template slot-scope="scope">
          <span v-if="scope.row.archState === 0" class="warning">预归档</span>
          <span
            v-if="scope.row.archState === 1"
            class="primary"
          >待四性检测</span>
          <span
            v-if="scope.row.archState === 2"
            class="primary"
          >接收待审核</span>
          <span v-if="scope.row.archState === 3" class="danger">驳回</span>
          <span v-if="scope.row.archState === 5" class="success">归档接受</span>
          <span v-if="scope.row.archState === 10" class="info">档案封存</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="archPeriod" label="保管期(月)">
        <template slot-scope="scope">
          <span v-if="scope.row.archPeriod === 0">永久</span>
          <span v-else>{{ scope.row.archPeriod }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="archDeptHotName"
        label="热点标签"
        width="width"
      >
        <template slot-scope="scope">
          <el-tag v-if="!!scope.row.archDeptHotName" type="success">{{
            scope.row.archDeptHotName
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230">
        <template slot-scope="scope">
          <el-button size="mini" @click="detail(scope.row)">详情</el-button>
          <el-button
            v-show="scope.row.archState < 2"
            size="mini"
            type="info"
            @click="handleTest(scope.row)"
          >四性检测</el-button>
          <el-button
            v-if="scope.row.archState === 2"
            type="success"
            size="mini"
            @click="audit(scope.row.archMainId, 5)"
          >通过</el-button>
          <el-button
            v-if="scope.row.archState === 2"
            type="danger"
            size="mini"
            @click="audit(scope.row.archMainId, 3)"
          >驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="page.pageNum"
        :page-sizes="[10, 20, 50]"
        :page-size="page.pageSize"
        layout="sizes, total, prev, pager, next"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog title="四性检测" :visible.sync="testDialog" width="width">
      <div style="margin-bottom: 20px">
        <el-steps :active="testActive" align-center finish-status="success">
          <el-step title="真实性检测" description="" />
          <el-step title="完整性检测" description="" />
          <el-step title="可用性检测" description="" />
          <el-step title="安全性检测" description="" />
        </el-steps>
      </div>
      <div class="bottom-box">
        <div class="left" :class="showList.show1 ? 'test-success' : ''">
          档案名称: {{ row.archTitle }}
        </div>
        <div v-show="showList.show1" class="right">
          <i class="el-icon-check test-success" style="font-weight: bold" />
        </div>
      </div>
      <div class="bottom-box">
        <div class="left" :class="showList.show2 ? 'test-success' : ''">
          档案编号: {{ row.archMainCode }}
        </div>
        <div v-show="showList.show2" class="right">
          <i class="el-icon-check test-success" style="font-weight: bold" />
        </div>
      </div>
      <div class="bottom-box">
        <div class="left" :class="showList.show3 ? 'test-success' : ''">
          归档状态: {{ row.archState | archState }}
        </div>
        <div v-show="showList.show3" class="right">
          <i class="el-icon-check test-success" style="font-weight: bold" />
        </div>
      </div>
      <div v-show="row.archDeptHotName" class="bottom-box">
        <div class="left" :class="showList.show4 ? 'test-success' : ''">
          热点标签: {{ row.archDeptHotName }}
        </div>
        <div v-show="showList.show4" class="right">
          <i class="el-icon-check test-success" style="font-weight: bold" />
        </div>
      </div>
      <div v-show="fileList" class="bottom-box">
        <div class="left" :class="showList.show5 ? 'test-success' : ''">
          含有附件:<span
            v-for="(item, index) in fileList"
            :key="item.archFilesId"
          >
            {{ item.fileName }}
            <span v-show="index !== fileList.length - 1">、</span>
          </span>
        </div>
        <div v-show="showList.show5" class="right">
          <i class="el-icon-check test-success" style="font-weight: bold" />
        </div>
      </div>
      <div slot="footer">
        <el-button @click="cancelTest()">取 消</el-button>
        <el-button
          v-if="showTest"
          type="primary"
          @click="startTest()"
        >开始检测</el-button>
        <el-button
          v-else
          type="primary"
          @click="audit(archMainId, 2)"
        >确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="详情" :visible.sync="detailDialog" width="45%">
      <el-form :model="selectRow" label-position="right" label-width="140px">
        <el-form-item label="档案名称">
          <div class="item-div">{{ selectRow.archTitle }}</div>
        </el-form-item>
        <el-form-item label="档案编号">
          <div class="item-div">{{ selectRow.archMainCode }}</div>
        </el-form-item>
        <el-form-item label="热点标签">
          <el-tag v-if="selectRow.archDeptHotName" type="success">{{
            selectRow.archDeptHotName
          }}</el-tag>
          <span v-else>暂无热点标签</span>
        </el-form-item>
        <el-form-item label="档案保管期(月)">
          <div class="item-div">
            {{ selectRow.archPeriod === 0 ? "永久" : selectRow.archPeriod }}
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-if="selectRow.notes"
            v-model="selectRow.notes"
            class="input form-width"
            type="textarea"
            :rows="3"
          />
          <span v-else>暂无备注</span>
        </el-form-item>
        <el-form-item label="档案附件">
          <div v-for="item in fileList" :key="item.archFilesId">
            <el-link type="primary">{{ item.fileName }}</el-link>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="detailDialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getArchMain,
  updateArchMainState,
  queryFilesById
} from '@/api/archManage'
export default {
  filters: {
    archState: function(value) {
      if (value === 0) {
        return '预归档'
      }
      if (value === 1 || value === 2) {
        return '接收待审核'
      }
    }
  },
  data() {
    return {
      listData: [],
      detailDialog: false,
      selectRow: {},
      testDialog: false,
      testActive: 0,
      showTest: true,
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      fileList: [],
      stateOptions: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 0,
          label: '预归档'
        },
        {
          value: 1,
          label: '待四性检测'
        },
        {
          value: 2,
          label: '接收待审核'
        },
        {
          value: 3,
          label: '驳回'
        },
        {
          value: 5,
          label: '归档接受'
        },
        {
          value: 10,
          label: '档案封存'
        }
      ],
      searchForm: {
        archMainTitle: '',
        archState: -1,
        username: ''
      },
      row: {},
      showList: {
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        show5: false
      }
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.staffCode = this.userInfo.username ? this.userInfo.username : this.userInfo.staffCode
    this.searchForm.username = this.staffCode
    this.getData()
  },
  methods: {
    // 获取列表数据
    getData() {
      this.isLoading = true
      const { pageNum, pageSize } = this.page
      const param = {
        pageNum: pageNum,
        pageSize: pageSize,
        ...this.searchForm
      }
      getArchMain(param).then((res) => {
        if (res.code === '0') {
          this.listData = res.data.records
          this.page.total = parseInt(res.data.total)
        }
      })
        .finally(() => {
          this.isLoading = false
        })
      // qryAllArchMainByType(param)
      //   .then((res) => {
      //     if (res.code === '0') {
      //       this.listData = res.data.records
      //       this.page.total = parseInt(res.data.total)
      //     }
      //   })
      //   .finally(() => {
      //     this.isLoading = false
      //   })
    },
    // 点击详情
    detail(row) {
      this.selectRow = row
      this.detailDialog = true
      queryFilesById({ archMainCode: row.archMainCode })
        .then((res) => {
          if (res.code === '0') {
            this.fileList = res.data
          }
        })
        .finally(() => {
          this.detailDialog = true
          this.isLoading = false
        })
    },
    audit(archMainId, type) {
      if (type === 2) {
        this.testDialog = false
        const param = {
          archMainId: archMainId,
          archState: type,
          auditUser: this.staffCode
        }
        updateArchMainState(param).then((res) => {
          if (res.code === '0') {
            this.getData()
          }
        })
        this.showList = {
          show1: false,
          show2: false,
          show3: false,
          show4: false,
          show5: false
        }
        return
      }
      this.$confirm(
        type === 3 ? '确认驳回该档案?' : '确认接受该档案?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.isLoading = true
        const param = {
          archMainId: archMainId,
          archState: type,
          auditUser: this.staffCode
        }
        updateArchMainState(param).then((res) => {
          if (res.code === '0') {
            this.getData()
          }
        })
      })
    },
    // 点击四性检测
    handleTest(row) {
      queryFilesById({ archMainCode: row.archMainCode })
        .then((res) => {
          if (res.code === '0') {
            this.fileList = res.data
          }
        })
      this.row = row
      this.testDialog = true
      this.archMainId = row.archMainId
    },
    cancelTest() {
      this.testDialog = false
      this.showList = {
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        show5: false
      }
      this.showTest = true
      this.testActive = 0
    },
    // 点击开始检测
    startTest() {
      const that = this
      this.showTest = false
      setTimeout(() => {
        that.showList.show1 = true
      }, 2300)
      setTimeout(() => {
        that.showList.show2 = true
      }, 3400)
      setTimeout(() => {
        that.showList.show3 = true
      }, 4500)
      setTimeout(() => {
        that.showList.show4 = true
      }, 6000)
      setTimeout(() => {
        that.showList.show5 = true
      }, 8000)

      setTimeout(() => {
        that.testActive = 1
      }, 2000)
      setTimeout(() => {
        that.testActive = 2
      }, 4800)
      setTimeout(() => {
        that.testActive = 3
      }, 6000)
      setTimeout(() => {
        that.testActive = 4
      }, 8000)
    },

    handleSizeChange(val) {
      this.page.pageNum = 1
      this.page.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getData()
    }
  }
}
</script>

<style scoped>
.home {
  margin: 20px;
}

.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}
.form-width {
  width: 80%;
}
.item-div {
  padding: 0px 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  width: 80%;
}
.danger {
  color: #f56c6c;
}
.primary {
  color: #409eff;
}
.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.info {
  color: #909399;
}
.bottom-box {
  display: flex;
  padding-left: 10%;
  padding-right: 10%;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
}
.bottom-box .left {
  width: 60%;
}
.bottom-box .right {
  width: 40%;
  text-align: right;
}
.test-success {
  color: #5fcb71;
}
div /deep/ .el-dialog {
  margin-top: 40px !important;
  border-radius: 8px;
}
div /deep/ .el-dialog__body {
  padding: 0 25px;
}
</style>
